<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>


    <!-- 引入其css -->
    <link rel="stylesheet" href="./css/magnifier.css">


    <!-- 重置 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/proDetail.css">

    <script src="./lib/jquery.js"></script>
    <script src="./lib/magnifier.js"></script>
    <script>
        $(function () {

            var magnifierConfig = {
                magnifier: "#magnifier1",//最外层的大容器
                width: 300,//承载容器宽
                height: 300,//承载容器高
                moveWidth: null,//如果设置了移动盒子的宽度，则不计算缩放比例
                zoom: 4//缩放比例
            };
            
            magnifier(magnifierConfig);


            // var _magnifier = magnifier(magnifierConfig);

            /*magnifier的内置函数调用*/
            /*
                //设置magnifier函数的index属性
                _magnifier.setIndex(1);
        
                //重新载入主图,根据magnifier函数的index属性
                _magnifier.eqImg();
            */

            $('.bookdetail > p > b').click(function () {
                $(this).toggleClass('ac').siblings().removeClass('ac')
            });


        });
    </script>


</head>

<body>
    <header class="header">
        <div class="container-full bg-black font-white">
            <div class="first-nav center cf">
                <a href="#" class="fl font-white f-l-i220">legochina.cn</a>
                <p class="fr">欢迎光临
                    <a href="#" class="theme-font-color">乐购</a>,请
                    <a href="#" class="font-white">登录</a>/
                    <a href="#" class="theme-font-color">注册</a>
                </p>
                <img class="logo" src="./images/logo.jpg" alt="">
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="center search-box cf" style="min-width: 700px;">

            <div class="shopcart fr">
                <a href="#" class="font-white">购物车
                    <span>3</span>
                </a>
                <a href="#">我的订单</a>
            </div>

            <div class="fr search-input-box">
                <form action="">
                    <input type="text" class="theme-border-color" placeholder="创意文具">
                    <input type="submit" value="" style="margin-left:-7px; cursor: pointer;">
                </form>
                <!-- 购物车的订单 -->
            </div>
        </div>
        <!-- 导航栏 -->
        <nav class="navigation center">
            <ul class="cf">
                <li>
                    <a href="#">图书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">原创文学</a>
                </li>
                <li>
                    <a href="#">服装</a>
                </li>
                <li>
                    <a href="#">户外运动</a>
                </li>
                <li>
                    <a href="#">儿童装</a>
                </li>
                <li>
                    <a href="#">家具</a>
                </li>
                <li>
                    <a href="#">创意文具</a>
                </li>
                <li>
                    <a href="#">地方特产</a>
                </li>
                <li>
                    <a href="#">海外购</a>
                </li>
                <li>
                    <a href="#">电器城</a>
                </li>
            </ul>
        </nav>
    </header>

    <!--产品详情-->
    <section id="proDetail" class="container-fluid p20 bgcf3 bs">
        <p class="container">
            <a href="#">图书</a> >
            <a href="#">小说</a> >
            <a href="#">情感/家庭/婚姻</a> >
            <a href="#">博集天卷</a> >
            <a href="#">她和他</a>
        </p>
        <div class="container clearfix bgcfff p1020 bs">

            <!--放大镜-->


            <div class="magnifier fl" id="magnifier1">
                <div class="magnifier-container">
                    <div class="images-cover"></div>

                    <div class="move-view"></div>

                </div>
                <div class="magnifier-assembly">
                    <div class="magnifier-btn">
                        <span class="magnifier-btn-left">&lt;</span>
                        <span class="magnifier-btn-right">&gt;</span>
                    </div>

                    <div class="magnifier-line">
                        <ul class="clearfix animation03">
                            <li>
                                <div class="small-img">
                                    <img src="images/1.png" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="images/2.png" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="images/3.png" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="images/4.png" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="images/1.png" />
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="magnifier-view"></div>

            </div>




            <!--图书详情-->
            <div class="fr bookdetail">
                <div class="p1020">
                    <h2 class="f20">她和他</h2>
                    <p class="cred">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                    <p>[法] 马克·李维 著；杨亦雨 译</p>
                </div>
                <div class="bgcccc p1020 priceDel">
                    <p>
                        <span>乐 购 价：</span>
                        <span class="cred f20">&yen;26.20</span>
                        <span>[6.9折] </span>
                        <span>[定价：￥38.00]</span>
                        <span>(降价通知)</span>
                    </p>
                    <p>
                        <span>促销信息：</span>
                        <span class="cred f12">满减 每满150.00元，可减50.00元现金</span>
                        <a href="#">详情 >></a>
                    </p>
                    <p>
                        <span>领 券：</span>
                        <i>100-6</i>
                        <i>200-50</i>
                    </p>
                    <p class="evaluation">
                        <span>累计评价</span>
                        <span class="cf60">10000</span>
                    </p>
                </div>
                <p class="p1020 catCheck">
                    <span>种类选择：</span>
                    <b>平装版</b>
                    <b>精装版</b>
                    <b>豪华版</b>
                    <b>豪华版plus</b>
                </p>

                <div class="clearfix p1020 mt30">
                    <div class="proNum fl">
                        <input type="text" value="1">
                        <a id="addNum">+</a>
                        <a id="reNum">-</a>
                    </div>
                    <p class="addCar fl">
                        <a class="cfff" href="#">加入到购物车</a>
                    </p>
                </div>
            </div>


        </div>
    </section>


    <!--footer-->
    <footer class="container mt30">
        <img src="./images/footer.png" alt="">
    </footer>



</body>

</html>